<template>
  <div class="app-container">
    <Transition name="slide" appear>
      <el-container
        class="home-container"
        :style="{
          background: 'pink'
        }"
        v-show="!footer.showDetail"
      >
        <!-- 左侧 -->
        <el-aside width="200px" class="side">
          <Aside></Aside>
        </el-aside>
        <!-- 右侧 -->
        <el-container class="main">
          <!-- 头部 -->
          <el-header class="header">
            <Header></Header>
            <!-- <Test></Test> -->
          </el-header>
          <!-- 主体 -->
          <el-main
            class="content"
            v-loading="firstLoading"
            :element-loading-background="loadingBg"
          >
            <router-view
              v-slot="{ Component }"
              @scroll="autoHide()"
              class="view"
            >
              <KeepAlive
                :max="8"
                :exclude="['ArtistDetailView', 'PlayListView']"
              >
                <component :is="Component" :key="$route.fullPath"></component>
              </KeepAlive>
            </router-view>
          </el-main>
          <!-- 底部 -->
          <el-footer class="footer" v-if="!footer.showDetail">
            <Footer></Footer>
          </el-footer>
        </el-container>
      </el-container>
    </Transition>
    <Transition name="slide">
      <MusicDetail v-if="showDetail"></MusicDetail>
    </Transition>
    <!-- 播放列表 -->
    <Drawer />
  </div>
</template>

<script setup lang="ts">
import { provide, ref, Ref, watch, computed, onMounted } from 'vue'

import Aside from '@components/layout/aside/index.vue'
import Header from '@components/layout/header/index.vue'
import Footer from '@components/layout/footer/index.vue'
import MusicDetail from '@/view/MusicDetail.vue'
import { storeToRefs } from 'pinia'
import useConfigStore from '@/store/config'
import useFooterStore from '@/store/footer'
import { getTheme, setStorAge } from '@/utils'
import { throttle } from 'lodash-es'
import { useRoute } from 'vue-router'
import useThemeStore from './store/theme'
import { storageType } from './model/enum'
import useUserStore from './store/user'

// 配置主题
const config = useConfigStore()
const {
  showScroll,
  left,
  contentHeight,
  headerHeight,
  musicFooterHeight,
  musicContentHeight,
  bgMode,
  drawerMode
} = storeToRefs(config)

const user = useUserStore()
const {
  loveSongs,
  loveAlbum,
  loveSinger,
  lovePlaylist,
  loveVideo,
  musicDownload,
  mvDownload,
  songRecord,
  videoRecord,
  loveRadio
} = storeToRefs(user)
console.log(999)
const menu = getTheme().get('menuColor')
const bg = getTheme().get('background') as Ref<string>
const fontGrayColor = getTheme().get('fontGray') as Ref<string>
const loadingBg = computed(() => {
  return bgMode.value == 'color' ? bg.value : 'rgb(0,0,0,0.9)'
})

const route = useRoute()

provide<Ref<string>>('fontGray', fontGrayColor)

// 在全屏模式改变屏占比,看起来更加合理
const mHeight = contentHeight
const hHeight = headerHeight
const dHeight = musicContentHeight
const dmHeight = musicFooterHeight

// 页面加载动画
const firstLoading = ref<boolean>(true)
provide<Ref<boolean>>('firstLoading', firstLoading)

function hideScroll() {
  if (showScroll.value !== 'none') {
    showScroll.value = 'none'
  }
}
// 需要滚动的页面地址映射
const mapper = new Map([
  ['/video', '/video'],
  ['/hall', '/hall'],
  ['/station', '/station'],
  ['/rvideo', 'rvideo'],
  ['/artistlist', '/artistlist']
])

provide<() => void>('hideScroll', hideScroll)
// 计时器判断是否显示进度条
let timeid: any = 0
// 自动隐藏进度条
const autoHide = throttle(
  () => {
    if (mapper.get(route.fullPath.split('?')[0])) {
      if (showScroll.value != 'block') {
        showScroll.value = 'block'
      }
      if (timeid) {
        clearTimeout(timeid)
      }
      timeid = setTimeout(() => {
        hideScroll()
      }, 3000)
    }
  },
  600,
  { leading: true, trailing: false }
)

// 解决页面抖动问题
const scrollVisible = showScroll
const leftDis = left

// 歌曲
const footer = useFooterStore()
const {
  songList,
  current,
  isPlay,
  playProcess,
  playTime,
  showDetail,
  songNum,
  playMode
} = storeToRefs(footer)

watch(showDetail, (newValue) => {
  console.log(newValue)
  console.log('变化了')
})

// 关闭网页之前，缓存相关记录
const theme = useThemeStore()
const {
  fontColor,
  background,
  menuColor,
  fontBlack,
  tableHover,
  shadow,
  searchBg,
  active,
  themeColor,
  fontGray
} = storeToRefs(theme)

onMounted(() => {
  window.addEventListener('beforeunload', () => {
    // 主题
    setStorAge(storageType.LOCAL, 'theme', {
      fontBlack: fontBlack.value,
      fontColor: fontColor.value,
      backgound: background.value,
      menuColor: menuColor.value,
      tableHover: tableHover.value,
      shadow: shadow.value,
      searchBg: searchBg.value,
      active: active.value,
      themeColor: themeColor.value,
      fontGray: fontGray.value
    })

    // 用户数据
    // 记录当前播放的歌曲
    setStorAge(storageType.LOCAL, 'currentPlay', current.value)
    // 记录当前播放的模式
    setStorAge(storageType.LOCAL, 'playMode', playMode.value)
    setStorAge(storageType.LOCAL, 'userPlaylist', songList.value)
    setStorAge(storageType.LOCAL, 'loveSongs', loveSongs.value)
    setStorAge(storageType.LOCAL, 'loveSinger', loveSinger.value)
    setStorAge(storageType.LOCAL, 'lovePlaylist', lovePlaylist.value)
    setStorAge(storageType.LOCAL, 'loveVideo', loveVideo.value)
    setStorAge(storageType.LOCAL, 'songRecord', songRecord.value)
    setStorAge(storageType.LOCAL, 'videoRecord', videoRecord.value)
    setStorAge(storageType.LOCAL, 'loveRadio', loveRadio.value)
  })
})
</script>

<style lang="less" scoped>
@side-background: v-bind(menu);
@other-background: v-bind(bg);
@font-color: v-bind(fontColor);
// @shadow: v-bind(boxShadow);
@font-color-gray: v-bind(fontGray);
@background: v-bind(bg);
@theme-color: v-bind(themeColor);

// 样式移动
.slide-enter-active,
.slide-leave-active {
  transition: all 0.75s ease !important;
}

.slide-enter-to {
  position: absolute;
  transform: translateY(0);
}

.slide-enter-from {
  position: absolute;
  transform: translateY(100%);
}

.slide-leave-to {
  position: absolute;
  transform: translateY(-100%);
}

.slide-leave-from {
  position: absolute;
  transform: translateY(0);
}

// 添加皮肤时添加的一些样式
.main-skin {
  backdrop-filter: brightness(80%);
  border-left: 1px solid rgba(220, 220, 220, 0.2);
}

.side-skin {
  backdrop-filter: brightness(80%);
}

.loading-skin {
  backdrop-filter: blur(15px) brightness(0.8) saturate(120%) contrast(1.2);
  background: @other-background;
}

.app-container {
  .song-detail-container {
    &:deep(.footer-container) {
      height: v-bind(dmHeight);
    }
    &:deep(.main) {
      height: v-bind(dHeight);
    }
  }
  .home-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    .side {
      background-color: @side-background;
      display: flex;
      justify-content: center;
    }

    .main {
      background-color: @other-background;

      .header,
      .footer {
        height: v-bind(hHeight);
        padding: 0;
      }

      .header-container,
      .footer-container {
        height: v-bind(hHeight);
      }

      .content {
        padding: 0;
        height: v-bind(mHeight);
        width: 87vw;
        overflow: auto;

        &::-webkit-scrollbar {
          display: none;
        }
        .view {
          padding-left: v-bind(leftDis);
          &::-webkit-scrollbar {
            display: v-bind(scrollVisible);
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
#nprogress {
  .bar {
    background: #1ed2a9 !important;
  }
}
.el-popover {
  min-width: 60px !important;
}
.el-popper__arrow::before {
  display: none !important;
}
.search-tip {
  padding: 0px !important;
  border-radius: 6px !important;
  top: 66px !important;
  // inset: 8vh auto auto 21.5vw !important;
}

//搜索提示和音量再皮肤模式下的毛玻璃效果
.popover-skin {
  backdrop-filter: blur(10px) brightness(0.8) saturate(120%) contrast(1.2);
}

//下拉框处于皮肤模式下的效果
.dropdown-skin {
  background-color: transparent !important;
  backdrop-filter: blur(10px) brightness(0.8) saturate(120%) contrast(1.2);
  .el-dropdown-menu__item {
    &:hover {
      background-color: rgba(220, 220, 220, 0.2) !important;
    }
  }
}

//动态改变主容器高度
.scroll-container {
  height: v-bind(mHeight);
}
</style>
